<template>
  <div class="banner">
    <!-- 标题 -->
    <div class="slogan">
      <span class="slogan-text"> 2K17 Waigua+ </span>
    </div>
    <!-- 轮播 -->
    <div class="caraousel">
      <div
        :class="data.isSelected ? 'card-1' : 'card-0'"
        v-for="(data, index) in picList"
        :key="index"
        @mouseover="mouveOverHandler(data)"
        @mouseleave="mouveLeaveHandler(data)"
        @click="toModule(data)"
      >
        <!-- <img :src="data.imagePath" /> -->
        <!-- 大图 -->
        <img :src="require('@/assets/slogan/' + data.sloganName + '.jpg')" />
        <!-- 小图 -->
        <img
          :src="require('@/assets/slogan/' + data.sloganName + '.png')"
          v-show="data.isSelected"
          class="introduction"
        />
      </div>
    </div>
  </div>
  <!-- 更多详情 -->
  <div class="toMore" @click="toMore">
    <el-tooltip class="box-item" content="点击查看更多">
      <img src="@/assets/other/pulldown.png" />
    </el-tooltip>
  </div>
</template>

<script>
/*eslint-disable*/
import { getCurrentInstance, onMounted } from "vue";
import { ElMessage } from "element-plus";
import pubsub from "pubsub-js";

import mainApi from "@/api/mainApi";

export default {
  name: "banner",
  data() {
    return {
      picList: [],
      picCount: 5,
      timerIndex: 0,
      timer: {},
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();

    onMounted(() => {
      document.getElementsByClassName("banner")[0].classList.add("loaded");
      // 读取目录图片
      readData();
    });

    // 读取目录图片
    function readData() {
      return new Promise((res, rej) => {
        // 读取文件仓库中的文件
        mainApi.readJson(ElMessage, (data) => {
          // 遍历文件路径
          traverseDirectory(
            window.myApi.path.join(data.fileHouse, "/catalogue"),
            res
          );
        });
      });
    }

    function traverseDirectory(folderPath, resolve) {
      let fs = window.myApi.fs;
      let path = window.myApi.path;

      if (!fs.existsSync(folderPath)) {
        console.log("文件夹不存在:", folderPath);
        return;
      }

      let files;
      try {
        // 读取文件夹内容
        files = fs.readdirSync(folderPath);
      } catch (error) {}

      //   console.log(files);
      let urlList = [];
      // 遍历文件夹内容
      files
        .reduce((promiseChain, base64) => {
          return promiseChain.then((res) => {
            // console.log(res);
            return readBase64(path, fs, folderPath, base64).then((result) => {
              urlList.push(result);
              return urlList;
            });
          });
        }, Promise.resolve())
        .then((res) => {
          proxy.picList = res;
          // 设置定时器
          proxy.timer = ImgInterval();
        });
    }

    // console.log(new Promise().then());

    function readBase64(path, fs, folderPath, base64) {
      return new Promise((res) => {
        // 图片路径
        let fullPath = path.join(folderPath, base64);
        // 读取图片为base64
        fs.readFile(fullPath, { encoding: "base64" }, (err, imageData) => {
          if (err) {
            ElMessage({
              message: `[${file}]图片读取失败`,
              type: "error",
              duration: 10000,
            });
            throw err;
          }
          // console.log(base64);
          res({
            imagePath: `data:image/jpeg;base64,${imageData}`,
            sloganName: base64.split("-")[1].split(".jpg")[0],
          });
        });
      });
    }

    // 设置定时器
    function ImgInterval() {
      proxy.picList[proxy.timerIndex].isSelected = true;
      timerIndexChange();
      return setInterval(() => {
        proxy.picList.forEach((element) => {
          element.isSelected = false;
        });
        proxy.picList[proxy.timerIndex].isSelected = true;
        timerIndexChange();
      }, 3000);
    }

    // 定时器记数
    function timerIndexChange() {
      proxy.timerIndex === proxy.picCount - 1
        ? (proxy.timerIndex = 0)
        : proxy.timerIndex++;
    }

    // 路由跳转
    function toMore() {
      pubsub.publish("bannerToModmenu");
    }

    // 跳转模块
    function toModule(data) {
      // console.log(data);
      pubsub.publish("bannerToModule", { moduleName: data.sloganName });
    }

    return {
      ImgInterval,
      toMore,
      toModule,
    };
  },
  methods: {
    mouveOverHandler(data) {
      clearInterval(this.timer);
      this.picList.forEach((element) => {
        element.isSelected = false;
      });
      data.isSelected = true;
    },
    mouveLeaveHandler(data) {
      data.isSelected = false;
      this.timer = this.ImgInterval(this.timerIndex);
    },
  },
};
</script>

<style lang="less" scoped>
@import "../less/variables.less";
.banner {
  display: none;
  border: 5px solid @red;
  height: 90%;
  width: 94.5%;
  position: relative;
  margin: 0 auto;
  .slogan {
    position: absolute;
    z-index: 9999;
    width: 20%;
    font-weight: bold;
    border-top: 50px solid @red;
    border-right: 25px solid transparent;
    > .slogan-text {
      position: absolute;
      bottom: 10px;
      left: 20px;
      color: white;
      font-family: "TW Cen MT";
      font-size: 200%;
    }
  }
}

.loaded {
  display: block;
  animation: @animation-fade;
}

.caraousel {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  > * {
    width: 20%;
    transform: skewX(-15deg);
    transition: width 0.3s ease;
    overflow: hidden;
    position: relative;
    > img:first-child {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    > .introduction {
      float: left;
      position: relative;
      bottom: 30%;
      width: 50%;
      left: 5%;
    }
  }
  > div:hover {
    cursor: pointer;
  }
  > div:first-child {
    margin-left: -10%;
    > .introduction {
      left: 28%;
    }
  }
  > div:last-child {
    margin-right: -10%;
  }
  > div:nth-child(2n) {
    border-left: @border;
    border-right: @border;
  }
  > .card-1 {
    width: 70%;
    // background-color: antiquewhite;
  }
}

.toMore {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;

  > img {
    width: 30px;
    transition: width 0.5s ease;
    animation: moveUpDown 1s ease-in-out infinite alternate;
  }
  > img:hover {
    width: 40px;
    cursor: pointer;
  }
}

@keyframes moveUpDown {
  0% {
    margin-top: 0px; /* 初始位置 */
  }
  100% {
    margin-top: 10px; /* 终止位置 */
  }
}
</style>